<p>Angular prevents XSS vulnerabilities by treating all values as untrusted by default. Untrusted values are systematically sanitized by the framework
before they are inserted into the DOM.</p>
<p>Still, developers have the ability to manually mark a value as trusted if they are sure that the value is already sanitized. Accidentally trusting
malicious data will introduce an XSS vulnerability in the application and enable a wide range of serious attacks like accessing/modifying sensitive
information or impersonating other users.</p>
<h2>Ask Yourself Whether</h2>
<ul>
  <li> The value for which sanitization has been disabled is user-controlled. </li>
  <li> It’s difficult to understand how this value is constructed. </li>
</ul>
<p>There is a risk if you answered yes to any of those questions.</p>
<h2>Recommended Secure Coding Practices</h2>
<ul>
  <li> Avoid including dynamic executable code and thus disabling Angular’s built-in sanitization unless it’s absolutely necessary. Try instead to
  rely as much as possible on static templates and Angular built-in sanitization to define web page content. </li>
  <li> Make sure to understand how the value to consider as trusted is constructed and never concatenate it with user-controlled data. </li>
  <li> Make sure to choose the correct <a href="https://angular.io/api/platform-browser/DomSanitizer">DomSanitizer</a> "bypass" method based on the
  context. For instance, only use <code>bypassSecurityTrustUrl</code> to trust urls in an <code>href</code> attribute context. </li>
</ul>
<h2>Sensitive Code Example</h2>
<pre>
import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
import { ActivatedRoute } from '@angular/router';

@Component({
  template: '&lt;div id="hello" [innerHTML]="hello"&gt;&lt;/div&gt;'
})
export class HelloComponent implements OnInit {
  hello: SafeHtml;

  constructor(private sanitizer: DomSanitizer, private route: ActivatedRoute) { }

  ngOnInit(): void {
    let name = this.route.snapshot.queryParams.name;
    let html = "&lt;h1&gt;Hello " + name + "&lt;/h1&gt;";
    this.hello = this.sanitizer.bypassSecurityTrustHtml(html); // Sensitive
  }
}
</pre>
<h2>Compliant Solution</h2>
<pre>
import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";
import { ActivatedRoute } from '@angular/router';

@Component({
  template: '&lt;div id="hello"&gt;&lt;h1&gt;Hello {{name}}&lt;/h1&gt;&lt;/div&gt;',
})
export class HelloComponent implements OnInit {
  name: string;

  constructor(private sanitizer: DomSanitizer, private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.name = this.route.snapshot.queryParams.name;
  }
}
</pre>
<h2>See</h2>
<ul>
  <li> OWASP - <a href="https://owasp.org/Top10/A03_2021-Injection/">Top 10 2021 Category A3 - Injection</a> </li>
  <li> OWASP - <a href="https://owasp.org/www-project-top-ten/2017/A7_2017-Cross-Site_Scripting_(XSS)">Top 10 2017 Category A7 - Cross-Site Scripting
  (XSS)</a> </li>
  <li> CWE - <a href="https://cwe.mitre.org/data/definitions/79">CWE-79 - Improper Neutralization of Input During Web Page Generation ('Cross-site
  Scripting')</a> </li>
  <li> <a href="https://angular.io/guide/security">Angular - Best Practices - Security</a> </li>
</ul>
